<template>
  <div class="layout-root">
    <el-header class="header-bar">
      <div class="header-title">
        <img src="../../public/img/图片.jpg" alt="logo" class="logo-image" />
        <span class="platform-title">非敏感安全互联网系统管理平台</span>
      </div>
      <el-button class="logout-btn" type="danger" size="mini" @click="logout">退出登录</el-button>
      <!-- 可添加右侧用户信息/操作 -->
    </el-header>
    <el-container>
      <el-aside width="200px" class="sidebar">
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" active-text-color="#409eff" router
          :unique-opened="true">
          <template v-for="item in list">
            <el-submenu v-if="item.children && item.children.length" :index="item.url" :key="item.url">
              <template slot="title">
                <span>
                  <i v-if="item.icon" class="menu-icon iconfont" :style="{ fontSize: '18px' }" v-html="item.icon"></i>
                  <span>{{ item.name }}</span>
                </span>
              </template>
              <el-menu-item v-for="child in item.children" :key="child.url" :index="child.url">
                <span>
                  <i v-if="child.icon" class="menu-icon iconfont" :style="{ fontSize: '18px' }" v-html="child.icon"></i>
                  <span>{{ child.name }}</span>
                </span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :key="item.url" :index="item.url">
              <span>
                <i v-if="item.icon" class="menu-icon iconfont" :style="{ fontSize: '18px' }" v-html="item.icon"></i>
                <span>{{ item.name }}</span>
              </span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "@/utils/index.js";
import { mapState } from "vuex";

export default {
  name: "Layout",
  computed: {
    ...mapState(["userRole"])
  },
  data() {
    return {
      activeMenu: this.$route.path,
      list: [],
      iconfont: "iconfont"
    };
  },
  mounted() {
    const token = localStorage.getItem("token");
    axios.get("/user/getRes", { params: { token } }).then((res) => {
      // 修复setUserRole的使用方式
      const role = res.data.isManager === 1 ? 'admin' : 'user';
      // 使用commit直接调用mutation
      this.$store.commit('setUserRole', role);
      
      this.list = role === 'admin' ? 
        res.data.sysResourcesMap.admin : 
        res.data.sysResourcesMap.pro;
    }).catch((err) => {
      console.error(err);
      this.$message.error("获取资源失败");
    });
  },
  methods: {
    logout() {
      localStorage.removeItem("token");
      this.$router.replace("/");
    }
  },
  watch: {
    $route(to) {
      this.activeMenu = to.path;
    }
  }
};
</script>

<style scoped>
.layout-root {
  height: 100vh;
  background: linear-gradient(135deg, #f3f6fa 0%, #e9f0fb 100%);
  overflow: hidden;
}

.sidebar {
  background: #f0f6ff !important;
  /* 调整侧边栏背景色 */
  min-height: 100vh;
  box-shadow: 2px 0 8px #e9f0fb;
  border-right: 1px solid #e6effd;
}

.el-menu-vertical-demo {
  background: #f0f6ff !important;
  border-right: none !important;
}

/* 一级菜单样式 */
.el-menu-vertical-demo .el-submenu__title {
  background: #f0f6ff !important;
  color: #0f172a !important;
  /* 更深更清晰的颜色 */
  font-weight: 700;
  /* 加粗 */
  font-size: 15px;
  border-radius: 8px;
  margin: 4px 8px;
  transition: all 0.2s ease;
  height: 46px;
  line-height: 46px;
  letter-spacing: 0.5px;
  /* 增加字间距 */
}

/* 二级菜单样式 */
.el-menu-vertical-demo .el-menu-item {
  background: #f0f6ff !important;
  color: #5a6d82 !important;
  font-weight: 500;
  font-size: 14px;
  border-radius: 8px;
  margin: 2px 8px 2px 16px;
  transition: all 0.2s ease;
  height: 40px;
  line-height: 40px;
  padding-left: 15px !important;
}

.el-menu-vertical-demo .el-menu-item.is-active {
  background: linear-gradient(90deg, #409eff 60%, #53caff 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(64, 158, 255, 0.2);
}

.el-menu-vertical-demo .el-submenu__title:hover {
  background: #e1edff !important;
  color: #409eff !important;
}

.el-menu-vertical-demo .el-menu-item:hover {
  background: #e1edff !important;
  color: #409eff !important;
  padding-left: 20px !important;
}

.menu-icon {
  margin-right: 8px;
  vertical-align: middle;
  color: inherit;
}

.header-bar {
  background: linear-gradient(90deg, #e9f0fb 60%, #b3c6e8 100%);
  color: #409eff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  height: 60px;
  padding-left: 24px;
  box-shadow: 0 2px 8px #b3c6e822;
  position: relative;
}

.header-title {
  flex: 1;
  display: flex;
  align-items: center;
  text-align: left;
  padding-left: 10px;
}

.logo-image {
  width: 36px;
  height: 36px;
  margin-right: 12px;
  object-fit: cover;
  border-radius: 50%;
  /* 改为圆形 */
  border: 2px solid #fff;
  /* 添加白色边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 添加轻微阴影 */
}

.platform-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  /* 更改标题文字颜色为深蓝灰色 */
}

.logout-btn {
  margin-left: 18px;
  background: linear-gradient(90deg, #ffb6b9 60%, #ffdde1 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 15px;
  padding: 6px 18px;
  transition: background 0.18s, box-shadow 0.18s;
}

.logout-btn:hover {
  background: linear-gradient(90deg, #ffdde1 60%, #ffb6b9 100%) !important;
  color: #fff !important;
}

.main-content {
  background: #fff;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  padding: 24px 32px;
  color: #232526;
  border-radius: 12px;
  margin: 18px 0 0 0;
  box-shadow: 0 2px 12px #b3c6e822;
  overflow-y: auto;
}

.main-content {
  background: #fff;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  padding: 24px 32px;
  color: #232526;
  border-radius: 12px;
  margin: 18px 0 0 0;
  box-shadow: 0 2px 12px #b3c6e822;
  overflow-y: auto;
}
</style>
